

/* 
    获取元素
*/

let sm=document.querySelector('.login-box')  //扫码登陆的盒子
let sm1=document.querySelector('.login-box1')  //扫码登陆的盒子

let user=document.querySelector('#login-user')  //账号登录按钮
let loginSm=document.querySelector('#login-sm')  //扫码登陆的按钮
console.log(sm);


/* 
    需求：点击扫码的时候  扫码盒子不隐藏 点击账号登录的时候扫码盒子隐藏
*/

loginSm.addEventListener('click',function(){
    sm.style.display='block'
    sm1.style.display='none'
})

user.addEventListener('click',function(){
    sm.style.display='none'
    sm1.style.display='block'
})


/* 
    需求1：点击input框的时候img就显示
*/
 let loginInp=  document.querySelectorAll('.login-box1 input')

let aa=document.querySelectorAll('.login-box1 p img')



loginInp.forEach(function(dom){
    dom.addEventListener('input',function(){
        //dom.parentNode找到他的爸爸
        console.log(dom.nextElementSibling);
        //dom.parentNode[1].style.display='block'
        dom.nextElementSibling.style.display='block'
    })
})

/* 
    需求2：点击xx框的时候输入框内容为空，还要隐藏自己
*/
    aa.forEach(function(v){
        v.addEventListener('click',function(){
            //v.previousElementSibling
            console.log(v.previousElementSibling);
            v.previousElementSibling.value=''
            v.style.display='none'
        })

    })


/* 
    需求3：点击钥匙框的时候
        奇数点击输入框的type类型改变
        偶数点击输入框的时候type类型 也改变
*/

    let img3=document.querySelector('.log-img3')
    let pwd=document.querySelector('#pwd')
    let user1=document.querySelector('#user')
    let login2=document.querySelector('#login2')
    let userMsg=document.querySelector('#userMsg')
    let pwdMsg=document.querySelector('#pwdMsg')


    let count=0
    img3.addEventListener('click',function(){
        ++count
        if(count%2 !=0){
            pwd.type='text'
        }else{
            pwd.type='password'
        }
    })


/**
 * 定义正则表达式
 */

//创建手机号验证规则-正则表达式
let userReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/

//创建手机号验证规则-正则表达式
let pwdReg = /^\d{6}$/ //6位数字

/**
 * 8.账号失去焦点时,验证手机号是否合法
 */
 user1.addEventListener('blur', function () {
    //使用reg验证输入信息是否正确 == 布尔值
    let bool = userReg.test(user1.value)
  
    //判断
    if (bool) {
      //正确
      userMsg.textContent = ''
    } else {
      //错误
      userMsg.textContent = '手机号不正确'
    }
  })
  
  /**
   * 9.密码失去焦点时,验证密码是否合法
   */
  pwd.addEventListener('blur', function () {
    //使用reg验证输入信息是否正确 == 布尔值
    let bool = pwdReg.test(pwd.value)

    //判断
    if (bool) {
      //正确
      pwdMsg.textContent = ''
    } else {
      //错误
      pwdMsg.textContent = '6位数字密码'
    }
  })

  /**
 * 10.点击登录按钮login, 验证手机号和密码是否合法
 */
login2.addEventListener('click', function () {

    if (!userReg.test(user1.value)) { //验证手机号 == 只判断失败情况
      userMsg.textContent = '手机号不正确'
  
    } else if (!pwdReg.test(pwd.value)) {//验证密码 == 只判断失败情况
      pwdMsg.textContent = '6位数字密码'
  
    } else {
      //跳转页面
      location.href = './success.html'
    }
  
  })





